<template>
  <div>
    <div>
      <el-table
          :data='tableData'
          style="width: 100%">
        <el-table-column
            v-for="item in tableColumns"
            :key="item.prop"
            :prop='item.prop'
            :label='item.label'
            v-bind="item.options"
            :width='null||item.width'
            :min-width="item.minWidth"/>
      </el-table>
    </div>
    <div style="display: block;float: right">
      <el-pagination
          small
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="size"
          :pager-count="current"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>

export default {
  name: 'z-table',
  props: {
    pageParam: {type: Object},
    tableData: {type: Array, default: () => [],},
    tableColumns: {type: Array, default: () => [],},
  },
  data() {
    return {
      current: 1,
      size:  20,
      total:  0,
      origin: -1,
    }
  },
  computed: {},
  methods: {
    handleSizeChange(size) {
      this.size = size;
      this.$emit("page-size-change", size);
      this.handleChange();
    },
    handleChange() {
      const {current, size = this.pageSize} = this;
      this.$emit("page-all-change", {page: current, size});
      this.resetHeight();
    },
    resetHeight() {
      this.$nextTick(() => {
        window.dispatchEvent(new Event("resize"));
      });
    },
    handleCurrentChange(current) {
      this.current = current;
      this.origin = -1;
      this.$emit("page-change", current);
      this.handleChange();
    },
  }
}
</script>